<template>
	<div class="top-banner">
    <!-- TODO 只保留小程序轮播 -->
    <!-- 小程序端用swiper -->
     <wx-swiper :style="{height:bannerHeight}" :circular="true" :autoplay="autoplay" class="wx-swiper" :indicator-dots="showIndicator"> 
      <wx-swiper-item v-for="(image, index) in itemDetail.img_path" :key="index">
        <img @click="previewImg" :src="image" @load="onImageLoad($event)" :data-src="image" />
        <!-- TODO 视频这期不上 -->
        <!-- 播放video -->  
        <div class="h5-video-wrap" v-if="index==0 && itemDetail.video_url && itemDetail.video_type==1">   
          <div class="video-box">       
            <video
              ref="videoPlay"
              class="itemDetail-video"
              @play="videoPlay"
              @pause="videoPause"
              playsinline="isiPhoneShowPlaysinline"
              x5-video-player-type="h5-page"
              t7-video-player-type="inline"
              webkit-playsinline="isiPhoneShowPlaysinline"
              x-webkit-airplay=""
              preload="none"
              controls="controls"
              object-fit="contain"
              data-role="txp_video_tag"
              :style="{height:bannerHeight}"
              :show-casting-button="showButton"
              :src="itemDetail.video_url"></video>
          </div>
          <div class="video_play" @click="clickVideoPlay"></div>
        </div>
        <!-- 播放腾讯优酷视频 -->
        <!-- <div class="iframe-video-wrap" v-else-if="index==0 && itemDetail.video_url && itemDetail.video_type==0">
          <div class="video_play" @click="clickPlayIframe"></div>
        </div> -->
      </wx-swiper-item>
    </wx-swiper>
    <!-- <template #indicator>
      <div class="custom-indicator">
        {{ current + 1 }}/<span v-html="itemDetail.img_path.length"></span>
      </div>
    </template> -->
    <!-- <van-popup class="iframe-box" v-model="showIframeVideo" @close="closeIframeVideo" v-html="iframeHtml">
    </van-popup> -->
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2019-11-29 09:38:45
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2019-11-29 09:38:45
   */
  import Vue from 'vue'
  // import { Swipe, SwipeItem } from 'vant'
  import small from '@/smallapp/small'
  
  // Vue.use(Swipe).use(SwipeItem)
  export default Vue.extend({
    name: 'index',
    props: {
      itemDetail: {
        type: Object
      }
    },
    data() {
      return {
        autoplay: 3000,
        isAutoPlay: true,
        videoStatus: 'paused',
        current: 0,
        showPause: true,
        showIframeVideo: false,
        iframe: '',
        iframeHtml: '',
        showIndicator: true,
        bannerHeight: 0,
        showButton: false, // 投屏按钮
        // swiperWidth: undefined,
        // swiperHeight: undefined,
        /* images: [
          'http://image.supvip.cn/37/4e/8007286/2019-08/5d43a2c23fa8d.jpg@!480x480',
          'http://img.wifenxiao.com/a9/df/3866/2019-11/5ddb8b6f5ef50.jpg@!w640',
          'http://image.supvip.cn/37/4e/8007286/2019-08/5d43a2c23fa8d.jpg@!480x480'
        ] */
      }
    },
    methods: {
      /**
       * 处理轮播的高度
       */
      /* dealSwipeSize() {
        // this.swiperWidth = window.screen.width
        // this.swiperHeight = window.screen.width
      }, */
      // onChange(index) {
      //   this.current = index
      // },
      // 小程序swiper获取图片高度
      onImageLoad(event){
        const imgHeight = event.detail.height
        if(imgHeight > parseFloat(this.bannerHeight)){
          this.bannerHeight = imgHeight+'px'
        }
      },
      videoPlay() {
        this.videoStatus = 'play'
      },
      videoPause() {
        this.videoStatus = 'paused'
      },
      // video播放
      clickVideoPlay() {
        this.showButton = small.wxCache('isProjectionScreen') // 投屏按钮
        const videoPlay = this.$refs.videoPlay[0]
        // console.log(this.videoStatus, 'videoStatus')
        document.querySelector('.itemDetail-video').$$getContext().then(context => {
          // console.log('autoplay', this.videoStatus)
          if (this.videoStatus == 'paused') {
            document.getElementsByClassName('video-box')[0].style.left = `${0}px`
            document.getElementsByClassName('video_play')[0].style.left = `${-9999}px`
            this.videoStatus = 'play'
            this.autoplay = false
            context.play()
          } else {
            document.getElementsByClassName('video_play')[0].style.left = `${-9999}px`
            this.videoStatus = 'paused'
            this.autoplay = true
            context.pause()
          }
        })
        // } else {
        //   // 停止自动轮播
        //   this.autoplay = 0
        //   const videoPlay = this.$refs.videoPlay[0]
        //   if (videoPlay.paused) {
        //     // $('.video-box').show()
        //     // $('.video_play').hide() 
        //     document.getElementsByClassName('video-box')[0].style.display = 'block'
        //     document.getElementsByClassName('video_play')[0].style.display = 'none'
        //     this.showPause = false
        //     videoPlay.play()
        //   } else {
        //     // $('.video_play').show()
        //     document.getElementsByClassName('video_play')[0].style.display = 'none'
        //     this.showPause = true
        //     videoPlay.pause()
        //   }
        // }
      },
      // 腾讯优酷等播放
      clickPlayIframe() {
        this.autoplay = 0
        this.iframeHtml = this.iframe
        this.showIframeVideo = true
      },
      // 腾讯优酷等播放弹层
      closeIframeVideo() {
        this.iframeHtml = ''
      },
      // TODO 增加图片预览
      previewImg(e) {
        // console.log(this.itemDetail.img_path,e.currentTarget.dataset.src)
        var imgUrl = e.currentTarget.dataset.src; //获取当前点击的图片
        var imgArr = this.itemDetail.img_path;
        wx.previewImage({
          current: imgUrl, //当前图片地址
          urls: imgArr,  //所有要预览的图片的地址集合数组形式
        })
      }
    },
    created() {
      // this.dealSwipeSize()
      // TODO 视频这期不上
      if (this.itemDetail.video_url && this.itemDetail.video_type == 0) {
        this.iframe = '<iframe class="diy-video" align="center" width="100%" src="' + this.itemDetail.video_url + '" wmode="transparent" allowfullscreen="true" style="border:0;" frameborder="no" marginwidth="0" marginheight="0" scrolling="no"></iframe>'
      }
    }
  })
</script>

<style lang="scss">
.top-banner{
  position:relative;
  .van-swipe-item,swiper-item{
    img{
      display:block;
    }    
    .video_play{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      // background: url("https://img.wifenxiao.com/h5-wfx/images/item/detail/video_play.png") center no-repeat;
      // background-size: 120px 120px;
      cursor: pointer;
      &::before{
        content:"";
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        width:150px;
        height:150px;
        border-radius:50%;
        background:rgba(0,0,0,.5) url("https://img.wifenxiao.com/h5-wfx/images/item/detail/video_play.png") 56px center no-repeat;
        background-size:50px;
      }
    }
    .video-box{
      // display:none;
      position:absolute;
      width:100%;
      height:100%;
      top:0;
      left:-9999px;
      background:#000;
    }
    video{
      position:absolute;
      left:0;
      // top:0;
      width:100%;
      /* width: 100%;
      position: relative; */
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }
  }
  .wx-swiper {
    width: 100%;
    max-height: 750px;
    img{
      width: 100%!important;
      height: 100%!important;
    }
  }
  .custom-indicator {
    position: absolute;
    right: 20px;
    bottom: 26px;
    padding: 10px 20px;
    font-size: 26px;
    color:#fff;
    background: rgba(0, 0, 0, 0.4);
    border-radius:60px;
    span{
      font-size:22px;
    }
  }
  .iframe-box{
    width:100%;
    background:#000;
  }
}
.itemDetail-video {
  max-height: 750px
}
</style>
